<template>
  <div style="width: 95%;margin: auto;margin-top: 100px" :xl="20">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card style="background: #528F87;cursor: pointer;">
          <div style="height:10vw;line-height: 10vw">
            <span style="position: relative;top: 2.2vw;left: 3vw; font-size: 2vw; color: white;">新建商品</span>
            <svg-icon icon-class="shangpin"  style="position: relative;font-size: 6vw;top: 1.8vw;left: 8.8vw;" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="background: #E85A14;cursor: pointer;">
          <div style="height:10vw;line-height: 10vw">
            <span style="position: relative;top: 2.2vw;left: 3vw; font-size: 2vw; color: white;">采购</span>
            <svg-icon icon-class="caigou"  style="position: relative;font-size: 6vw;top: 1.8vw;left: 12.8vw;" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="background: #7889A5;cursor: pointer;">
          <div style="height:10vw;line-height: 10vw">
            <span style="position: relative;top: 2.2vw;left: 3vw; font-size: 2vw; color: white;">销售</span>
            <svg-icon icon-class="xiaoshou"  style="position: relative;font-size: 6vw;top: 1.8vw;left: 12.8vw;" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
          <el-card style="background: #F8AE45;cursor: pointer;">
            <div style="height:10vw;line-height: 10vw">
              <span style="position: relative;top: 2.2vw;left: 3vw; font-size: 2vw; color: white;">库存</span>
              <svg-icon icon-class="kucun"  style="color:#515B77;position: relative;font-size: 6vw;top: 1.8vw;left: 12.8vw;" />
            </div>
          </el-card>
      </el-col>
      <el-col :span="8">
          <el-card style="background: #98AAB4;cursor: pointer;">
            <div style="height:10vw;line-height: 10vw">
              <span style="position: relative;top: 2.2vw;left: 3vw; font-size: 2vw; color: white;">客户管理</span>
              <svg-icon icon-class="customer"  style="position: relative;font-size: 6vw;top: 1.8vw;left: 8.8vw;" />
            </div>
          </el-card>
      </el-col>
      <el-col :span="8">
          <el-card style="background: #EFBC8F;cursor: pointer;">
            <div style="height:10vw;line-height: 10vw">
              <span style="position: relative;top: 2.2vw;left: 3vw; font-size: 2vw; color: white;">销售统计</span>
              <svg-icon icon-class="shangpin"  style="position: relative;font-size: 6vw;top: 1.8vw;left: 8.8vw;" />
            </div>
          </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8" class="grid-xs-9">
        <div class="grid-content bg-purple">
          <!-- 今日销量 -->
          <el-card shadow='hover' class="tableInfo">
            <div slot="header">
              <span style="font-weight: bold">今日销量</span>
            </div>
            <div>
              <el-table
                :data="xiaoliangData"
                stripe
                border
                height="450px"
                style="width: 100%">
                <el-table-column prop="cangkuName" label="店铺名称"></el-table-column>
                <el-table-column prop="goodName" label="商品名称"></el-table-column>
                <el-table-column prop="totalshuliang" label="销量"></el-table-column>
                <el-table-column prop="totaljiner" label="销售金额(￥)">
                  <template v-slot="scope">
                    <span>{{ scope.row.totaljiner | rounding }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div slot="body">
              <span style="font-weight: bold">今日销量</span>
            </div>
          </el-card>
        </div>
      </el-col>

      <!-- 今日数据 -->
      <el-col :span="16" class="grid-xs-9">
        <div class="grid-content bg-purple">

          <el-card shadow='hover' class="tableInfo">
            <div slot="header">
              <span style="font-weight: bold">今日数据</span>
            </div>
            <div>
              <el-table
                :data="tableData"
                stripe
                border
                height="450px"
                style="width: 100%">
                <el-table-column prop="chukuCangku" label="店名" class="grid-xs-3"></el-table-column>
                <el-table-column prop="jiner" label="销售金额(￥)" class="grid-xs-3">
                  <template v-slot="scope">
                    <span>{{ scope.row.jiner | rounding }}</span>
                  </template>
                </el-table-column>
                <!--                <el-table-column prop="weihuankuan" label="客户未还款" class="grid-xs-3"></el-table-column>-->
                <el-table-column prop="gouhuozongjiner" label="购货总金额(￥)" class="grid-xs-3">
                  <template v-slot="scope">
                    <span>{{ scope.row.gouhuozongjiner | rounding }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="lirunjiner" label="利润金额(￥)" class="grid-xs-1">
                  <template v-slot="scope">
                    <span>{{ scope.row.lirunjiner | rounding }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>


        </div>
      </el-col>

      <!--      <el-col :span="8" class="grid-xs-9">-->
      <!--        <div class="grid-content bg-purple">-->

      <!--          &lt;!&ndash; 今日出勤人数 &ndash;&gt;-->
      <!--          <el-card shadow= 'hover' class="tableInfo">-->
      <!--            <div slot="header">-->
      <!--              <span style="font-weight: bold">今日出勤人数</span>-->
      <!--            </div>-->
      <!--            <div>-->
      <!--              <el-table-->
      <!--                :data="chuqinData"-->
      <!--                stripe-->
      <!--                border-->
      <!--                height="450px"-->
      <!--                style="width: 100%">-->
      <!--                <el-table-column prop="dianming" label="店称"></el-table-column>-->
      <!--                <el-table-column prop="renshu" label="人数"></el-table-column>-->
      <!--                <el-table-column prop="remark" label="备注"></el-table-column>-->
      <!--              </el-table>-->
      <!--            </div>-->
      <!--          </el-card>-->

      <!--        </div>-->
      <!--      </el-col>-->

      <el-col :span="24" class="grid-xs-9" style="padding-bottom: 30px">
        <!-- 柱状图 -->
        <el-card style="height: 260px">
          <div style="height:260px;" ref="barEcharts"></div>
        </el-card>
        <!--        &lt;!&ndash; 饼图 &ndash;&gt;-->
        <!--        &lt;!&ndash; style="width: 32.5%;height: 265px;marginRight: 1%;margin-top: 1%;float: left" &ndash;&gt;-->
        <!--        <el-card  class="bingtu grid-xs-9 ">-->
        <!--          &lt;!&ndash; style="width: 100%;height: 265px;" &ndash;&gt;-->
        <!--          <div  ref="pieEcharts1" class="yuanxintu grid-xs-9 bingtu">-->
        <!--&lt;!&ndash;          <div ref="pieEcharts1" class="grid-xs-9"></div>&ndash;&gt;-->
        <!--          </div>-->
        <!--        </el-card>-->

        <!--        <el-card class="bingtu grid-xs-9 " >-->
        <!--          <div ref="pieEcharts2" class="yuanxintu grid-xs-9 bingtu"></div>-->
        <!--        </el-card>-->

        <!--        <el-card class="bingtu grid-xs-9">-->
        <!--          <div ref="pieEcharts3" class="yuanxintu grid-xs-9 bingtu"></div>-->
        <!--        </el-card>-->
      </el-col>

    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  todayData,
  XiaohuoAndGouhuoByWeek,
  selectXiaoshouChukupaihangByShuliang,
  selectTodayYuangongList,
  kucunBycangku
} from '@/api/sy'
export default {
  name: 'index',
  data() {
    return {
      imgUrl: '',
      value: new Date(),
      date7jin: [],
      tableData: [],
      xiaoliangData: [],
      kucunData: [],
      chuqinData: [],
      cangkuData: {
        xiaohuoData: [],
        gouhuoData: []
      },
      shangpingData: {
        cangkuName: '',
        kuchunAll: '',
        kuchunGoodName: {
          kuncun: '',
          goodName: '',
          zhanbi: ''
        }
      }
    }
  },
  created() {
    var myDate = new Date() // 获取今天日期
    myDate.setDate(myDate.getDate() - 6)
    var dateTemp
    var flag = 1
    for (var i = 0; i < 7; i++) {
      dateTemp = (myDate.getMonth() + 1) + '-' + myDate.getDate()
      this.date7jin.push(dateTemp)

      myDate.setDate(myDate.getDate() + flag)
    }
  },
  mounted() {
    //调用接口
    //今日数据
    todayData().then(response => {
      console.log('old', this.tableData)
      //赋值
      this.tableData = response.data
      console.log('new', this.tableData)
    })
    //销售库存
    selectXiaoshouChukupaihangByShuliang().then(response => {
      //赋值
      this.xiaoliangData = response.data
      console.log('new2', this.tableData)
    })
    //出勤人数
    selectTodayYuangongList().then(response => {
      //赋值
      this.chuqinData = response.data
    })

    // kucunBycangku().then(response=> {
    //   const cangkuCount = response.data.length;
    //   if(cangkuCount>0) {
    //     this.initPieEcharts1(response)
    //   }
    //   if(cangkuCount>1) {
    //     this.initPieEcharts2(response)
    //   }
    //   if(cangkuCount>2) {
    //     this.initPieEcharts3(response)
    //   }
    // });
    this.initBarEcharts()

  },
  filters: {
    rounding(value) {
      return value.toFixed(2)
    }
  },
  methods: {
    //柱状图
    initBarEcharts() {
      XiaohuoAndGouhuoByWeek().then(response => {

        this.cangkuData.xiaohuoData = response.data.xiaohuoData
        this.cangkuData.gouhuoData = response.data.gouhuoData

        //	此dom为echarts图标展示dom
        let myChart = echarts.init(this.$refs.barEcharts)
        // console.log(this.cangkuData.xiaohuoData)
        let option = {
          title: {
            text: '销货|购货'
          },
          tooltip: {},
          legend: {
            data: ['销货(￥)', '购货(￥)']
          },
          xAxis: {
            data: this.date7jin
          },
          yAxis: {},
          series: [
            {
              name: '销货(￥)',
              type: 'bar',
              data: this.cangkuData.xiaohuoData
            },
            {
              name: '购货(￥)',
              type: 'bar',
              data: this.cangkuData.gouhuoData
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option, true)
      })
    },
    //饼图1
    initPieEcharts1(response) {

      this.shangpingData = response.data[0]
      this.shangpingData.kuchunGoodName = response.data[0]['kuchunGoodName']
      // console.log("仓库名" +this.shangpingData.cangkuName)
      console.log('数组长度' + this.shangpingData.kuchunGoodName.length)
      // console.log("商品库存" + this.shangpingData.kuchunGoodName.kuncun);

      var newData = []

      for (var i = 0; i < this.shangpingData.kuchunGoodName.length; i++) {
        this.shangpingData.kuchunGoodName = this.shangpingData['kuchunGoodName']

        var list = {
          value: this.shangpingData.kuchunGoodName[i].kuncun,
          name: this.shangpingData.kuchunGoodName[i].goodName
        }
        newData.push(list)
      }
      console.log(newData)

      let myChart = echarts.init(this.$refs.pieEcharts1)
      let option = {
        title: {
          text: this.shangpingData.cangkuName,
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          itemWidth: 10,  // 设置宽度
          itemHeight: 10, // 设置高度
          top: '0%',
          left: 'left'
        },
        series: [
          {
            name: this.shangpingData.cangkuName,
            type: 'pie',
            radius: ['70%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'left'
            },
            labelLine: {
              show: true,
              length: 0.001
            },
            data: newData
          }
        ]
      }
      myChart.setOption(option, true)

    },
    //饼图2
    initPieEcharts2(response) {

      this.shangpingData = response.data[1]
      this.shangpingData.kuchunGoodName = response.data[1]['kuchunGoodName']

      var newData = []
      for (var i = 0; i < this.shangpingData.kuchunGoodName.length; i++) {
        this.shangpingData.kuchunGoodName = this.shangpingData['kuchunGoodName']

        var list = {
          value: this.shangpingData.kuchunGoodName[i].kuncun,
          name: this.shangpingData.kuchunGoodName[i].goodName
        }
        newData.push(list)
      }

      let myChart = echarts.init(this.$refs.pieEcharts2)
      let option = {
        title: {
          text: this.shangpingData.cangkuName,
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          itemWidth: 10,  // 设置宽度
          itemHeight: 10, // 设置高度
          top: '0%',
          left: 'left'
        },
        series: [
          {
            name: this.shangpingData.cangkuName,
            type: 'pie',
            radius: ['70%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'left'
            },
            labelLine: {
              show: false
            },
            data: newData
          }
        ]
      }
      myChart.setOption(option, true)

    },
    //饼图3
    initPieEcharts3(response) {

      this.shangpingData = response.data[2]
      this.shangpingData.kuchunGoodName = response.data[2]['kuchunGoodName']

      var newData = []
      for (var i = 0; i < this.shangpingData.kuchunGoodName.length; i++) {
        this.shangpingData.kuchunGoodName = this.shangpingData['kuchunGoodName']
        var list = {
          value: this.shangpingData.kuchunGoodName[i].kuncun,
          name: this.shangpingData.kuchunGoodName[i].goodName
        }
        newData.push(list)
      }

      let myChart = echarts.init(this.$refs.pieEcharts3)
      let option = {
        title: {
          text: this.shangpingData.cangkuName,
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          itemWidth: 10,  // 设置宽度
          itemHeight: 10, // 设置高度
          top: '0%',
          left: 'left'
        },
        series: [
          {
            name: this.shangpingData.cangkuName,
            type: 'pie',
            radius: ['70%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'left'
            },
            labelLine: {
              show: true
            },
            data: newData
          }
        ]
      }
      myChart.setOption(option, true)

    }
  }
}
</script>
<style lang="scss" scoped>

@import 'src/assets/styles/distributed.scss';

.yuanxintu {
  width: 100%;
  height: 265px;
}

</style>

